@charset "utf-8";
/*!
 * Mixins
 */

@import './variable';

// Clearfix
@mixin fn-clear() {
  zoom:1;

  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: ' ';
    clear: both;
    height: 0;
  }
}

@mixin flexbox {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}

@mixin inline-flex {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -moz-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

@mixin flex($fg: 1, $fs: null, $fb: null) {
    
	// Set a variable to be used by box-flex properties
	$fg-boxflex: $fg;

	// Box-Flex only supports a flex-grow value so let's grab the
	// first item in the list and just return that.
	@if type-of($fg) == 'list' {
		$fg-boxflex: nth($fg, 1);
	}

	-webkit-box-flex: $fg-boxflex;
	-webkit-flex: $fg $fs $fb;
	-moz-box-flex: $fg-boxflex;
	-moz-flex: $fg $fs $fb;
	-ms-flex: $fg $fs $fb;
	flex: $fg $fs $fb;
}

@mixin radius($size:0.4rem) {
  -moz-border-radius:#{$size};
  -webkit-border-radius:#{$size};
  border-radius: #{$size};
}

@mixin flex-grow($int: 0) {
	-webkit-box-flex: $int;
	-webkit-flex-grow: $int;
	-moz-flex-grow: $int;
	-ms-flex-positive: $int;
	flex-grow: $int;
}

@mixin property-transform{
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    -ms-transition-property: -ms-transform;    
    transition-property: transform;
}

@mixin content-box{
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

@mixin module-quantity(){
  position: relative;
  overflow: hidden;
  width: 9rem;
  text-align:right;
  float: right;
  @extend .flex-row;
  white-space: nowrap;
  .decrement,.increment,.quantity{
    border: 1px solid #cacbcb;
    width: 2.6rem;
    height: 2.6rem;
    line-height: 2.6rem;
    margin: 0;
    text-align: center;
    @extend .flex-item;
  }
  .decrement,.increment{
	border-radius:0.4rem;
	display: -moz-inline-stack;
    display:inline-block;
    font-size: $fs15;
    font-weight: bold;
  }
  .quantity {
    font-size: $fs12;
    font-family: verdana;
    -webkit-appearance: none;
    color: $color03;
    border:1px solid $bg00;
    background-color: transparent;
  }
  .increment{
       color:$color01;
     }
  .decrement{
    color:$color05;
  }
  .disabled{
    color:$color01;
  }
}

@mixin ellipsisLn($line) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
  word-wrap:break-word;
  word-break:break-all;
}



@mixin green-button(){
		border-color: $bg06;
		background-color: $bg06;
		color: $color10;
		position: relative;
		display: block;
		margin: 0;
		padding: 0 0.6px;
		border-width: 1.5px;
		border-style: solid;
		@include radius(0.4rem);
		vertical-align: top;
		text-align: center;
		text-overflow: ellipsis;
		font-size: $fs14;
		line-height: 3.6rem;
		width:100%;
}

// Set color for the placeholder text
@mixin placeholder($color: #999,$fsize: 1.5rem) {
  :-moz-placeholder {
    color: $color;
    font-size: $fsize;
  }
  ::-webkit-input-placeholder {
    color: $color;
    font-size: $fsize;
  }
}
// ie7 inline-block hack
@mixin ie7-inline-block {
  *display: inline;
  *zoom: 1;
}

// Set text-size-adjust property for mobile devices
@mixin text-size-adjust($value: 100%) {
  @each $prefix in 'webkit', 'moz', 'ms' {
    -#{$prefix}-text-size-adjust: $value;
  }
}

@mixin iptbox() {
  display: inline-block;
  height: 2.6rem;
  padding: 0.4rem;
  font-size: 1.5rem;
  line-height: 2.6rem;
  color: $color01;
  border: 1px solid $border01;
}

/* 多行加省略号 */
@mixin ellipsisLn($line) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
  word-wrap:break-word;
  word-break:break-all;
}

@mixin text_wrap() {
  word-wrap:break-word;
  word-break:break-all;
}



@mixin btn-public(){
  display: inline-block;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  position: relative;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

@mixin btn-size($type:default){
  @if $type == minier {

  } @else if $type == xs {

  } @else if $type == sm {

  } @else if $type == lg {

  } @else {
    padding:0;
    font-size:$fs14;
    width:7.8rem;
    height:2.6rem;
    line-height: 2.6rem;
  }
}

